vscode透明背景以及背景图片设置 |
您所在的位置：网站首页 › vscode 自定义背景 › vscode透明背景以及背景图片设置 |
vscode透明背景以及背景图片设置
|
vscode透明背景以及背景图片设置
更新可以不用往下翻了透明窗口设置背景图片设置最终效果
更新
其实去年后来就找到了一个很完美的插件，不过忘了自己还发过这么一个东西（ 就是下面这个插件，安装完以后能在窗口右下角找到一个按钮
这次vscode美化分为透明窗口和背景图片两个部分，都是直接使用插件的，只有一点点配置过程，非常适合刚开始着手编译器但又追求美观的萌新食用（所以不一定能完全按照自己的想法美化的哦） （我的背景图片是用PS从奇蛋物语这个番里扣下来的） 透明窗口设置需要下载的插件：Windows opacity 下载好后就可以直接看到效果了 想要更改透明度的话右击插件列表中的该插件，选择扩展设置
需要下载的插件：background （注意，这个插件不是设置整个界面的背景图片，而是设置代码区域的背景图片） 启用后重启就能看见效果了，是自带的背景图片 想要更改图片的话同样右击选择扩展设置 点击 Background：Style 这一栏中的 在settings.json中编辑 选项 或者不想随便改的话，在大括号里添加如下代码 自定义图片路径 "background.customImages": [ "file:///D:/Sailver/Pictures/vscode/wonder1920x1080.png", ],记得把 “background.customImages”: [ “file:///D:/Sailver/Pictures/vscode/wonder1920x1080.png”, ], 中的路径替换成自己想要设置为背景的图片路径 将默认背景禁用 "background.useDefault": false,另外可以更改背景图片透明度 更改 "background.style"里的opacity值即可 比如 "opacity": 0.2,注意：默认值是1，但最好不要一开始就设为1，因为加上前面图层设为最高这一自带的语句，可能会导致彻底挡住代码（没试过，但最好别这么干，会出麻烦的？） 当然其他属性也可以自定义，自己试试吧。 这是我这个页面里的全部内容，基本没有怎么改 { "C_Cpp.updateChannel": "Insiders", "workbench.colorTheme": "Atom One Dark", "workbench.iconTheme": "material-icon-theme", "editor.fontSize": 17, "winopacity.opacity": 230, "background.customImages": [ "file:///D:/Sailver/Pictures/vscode/wonder1920x1080.png", ], "background.useDefault": false, "background.style": { "content": "''", "pointer-events": "none", "position": "absolute", "z-index": "1", "width": "100%", "height": "100%", "background-position": "100% 100%", "background-repeat": "no-repeat", "background-size": "100% 100%", "opacity": 0.2, }, }至此所有工作都完成了，当然也可以继续学习修改background里的代码来获得更好的效果 （以后想尝试做一下毛玻璃效果之类的，不过还是等闲下来再整吧） 最终效果
|
点击这个按钮就可以进行各种设置了，包括透明度，背景图片之类的，比自己去配要舒服多了
在框中输入数值，透明度范围0~255，数值越小越透明 
然后看到这个界面，就可以自由发挥随便改啦（真的 
【本文地址】
今日新闻 |
推荐新闻 |